<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>计算属性</title>
</head>


<body>
    <div id="app">
       
    </div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const app = {
        data() {
            return {
                counts: 5,
                prices: 10,
                message: '总价',
                watchTotalPrices: ''
            }
        },
        computed:{
            total(){
                console.log('发生变化')
                return Date.now() + '-->' + this.counts*this.prices;
            }
        },
        methods: {
            getTotal() {
                console.log('getTotal总价变化')
                return this.message + Date.now() + '-->' + this.counts * this.prices;
            }
        },
        template: `<div> 数量：{{counts}} 个，价格：{{prices}} 元</div>
            <div>总价： {{total}}</div> 
            <div>getTotal()总价： {{getTotal()}} </div> 
            <div>watchTotalPrices --> {{watchTotalPrices}} </div>        `
        ,
        watch: {
            prices() {
                console.log("watch --> 价格发生变化");
                    this.watchTotalPrices = this.counts * this.prices + '元';
            },
            counts() {
                console.log("counts --> 数量发生变化");
                    this.watchTotalPrices = this.counts * this.prices + '元';
            }
        }
    }
    Vue.createApp(app).mount("#app");
</script>

</html>